<template>
	<view class="page" :style="{'height':(h-mt)+'px','padding-top':mt+'px'}">
		<c-nav-bar title="我的钱包" backUrl="/pages/my/index"></c-nav-bar>
		<view class="box">
			<view class="b_money">
				<text>账户余额(元)</text>
				<text>{{(money||0).toFixed(2)}}</text>
			</view>
			<view class="b_btns">
				<view @tap="toTurnPath('/pagesMy/wallet/withdraw?money='+money)">
					<image src="https://i.ringzle.com/file/20231221/7d6317ae922a4d269ac4ea1bc28364aa.png"></image>
					<text>提现</text>
				</view>
				<view @tap="toTurnPath('/pagesMy/wallet/topup?money='+money)">
					<image src="https://i.ringzle.com/file/20231221/bb624ea4cda54f19b500bc60fee25cab.png"></image>
					<text>充值</text>
				</view>
			</view>
		</view>
		<view class="records">
			<view class="r_title">
				<text>交易记录</text>
				<view @tap="toTurnPath('/pagesMy/wallet/record')">
					<text>查看全部</text>
					<image src="@/static/index/steamerTicket/icon_yjt.png"></image>
				</view>
			</view>
			<view class="r_list">
				<block v-if="records.length>0">
					<view class="rl_item" v-for="(item,index) in records" :key="index" @tap="toDetails(item)">
						<view class="rli_l">
							<text class="rlil_text">{{item.title}}</text>
							<text class="rlil_date">{{item.createDate}}</text>
						</view>
						<view class="rli_r">
							<text class="rlir_text" :class="[2,4].includes(item.consumeType)?'rlir_text_cz':'rlir_text_tx'">
								{{[2,4].includes(item.consumeType)?'+':''}}{{item.amount}}
							</text>
							<!-- <text class="rlir_money">余额{{item.afterAmount}}元</text> -->
						</view>
					</view>
				</block>
				<block v-else>
					<NoData/>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				money:0,
				records:[],
				consumeTypes:[],
				orderTypes:[],
				flowTypeCfg:{1:'收入',2:'支出'},
				isOnlinePaymentCfg:{1:'是',0:'否'},
				sourceCfg:{1:'PC',2:'小程序'}
			}
		},
		onLoad() {
			// this.getInfo();
		},
		methods: {
			async getConsumeType(){
				return new Promise((resolve,reject)=>{
					this.$api.post('/api/dict/getListByTypes',['consume_type']).then(res=>{
						if(res.data.code===0){
							let temp = [];
							res.data.data.forEach(d=>{
								temp.push({
									key:d.dictValue,
									value:d.dictLabel
								});
							})
							resolve(temp);
						}else this.$showModal(res.data.msg);
					})
				})
			},
			async getOrderType(){
				return new Promise((resolve,reject)=>{
					this.$api.post('/api/dict/getListByTypes',['order_type']).then(res=>{
						if(res.data.code===0){
							let temp = [];
							res.data.data.forEach(d=>{
								temp.push({
									key:d.dictValue,
									value:d.dictLabel
								});
							})
							resolve(temp);
						}else this.$showModal(res.data.msg);
					})
				})
			},
			async getInfo(){
				this.consumeTypes = await this.getConsumeType();
				this.orderTypes = await this.getOrderType();
				
				this.$api.get('/api/userWalletInfo/getOne').then(res=>{
					if(res.data.code===0){
						this.money = res.data.data.walletAmount;
						this.records = res.data.data.list;
						this.records.forEach(r=>{
							let ct = this.consumeTypes.find(c=>c.key==r.consumeType);
							let ot = this.orderTypes.find(c=>c.key==r.orderType);
							let orderType = ot?ot.value:'';
							let exit = ct&&ot&&ot.value.indexOf(ct.value)>-1;
							r.title = exit?orderType:(orderType+(ct?ct.value:''));
						})
					}else this.$showModal(res.data.msg);
				})
			},
			toTurnPath(url){
				uni.navigateTo({ url });
			},
			toDetails(item){
				uni.navigateTo({
					url:'/pagesMy/wallet/details?item='+encodeURIComponent(JSON.stringify(item))
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.page{
		.box{
			width: calc(100% - 60rpx);
			margin: 24rpx 30rpx 0;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0,0,0,0.06);
			border-radius: 24rpx;
			.b_money{
				width: 100%;
				height: 236rpx;
				padding: 0 42rpx;
				box-sizing: border-box;
				background: url(https://i.ringzle.com/file/20231221/58dba6217f2e483b8fb5cf44d4f0f2ee.png) no-repeat;
				background-size: 100% 100%;
				display: flex;
				flex-direction: column;
				text{
					color: #9B4600;
					&:first-child{
						font-size: 32rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						margin-top: 48rpx;
					}
					&:last-child{
						font-size: 56rpx;
						font-family: D-DIN, D-DIN;
						font-weight: bold;
						margin-top: 36rpx;
					}
				}
			}
			.b_btns{
				width: 100%;
				height: 104rpx;
				display: flex;
				justify-content: space-between;
				&>view{
					width: 50%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					image{
						width: 40rpx;
						height: 40rpx;
					}
					text{
						font-size: 32rpx;
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						color: #9B4600;
						margin-left: 20rpx;
					}
				}
			}
		}
		.records{
			margin-top: 53rpx;
			width: 100%;
			height: calc(100% - 417rpx);
			padding: 0 24rpx;
			box-sizing: border-box;
			.r_title{
				margin-bottom: 33rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				&>text{
					font-size: 36rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					color: #000000;
				}
				&>view{
					display: flex;
					align-items: center;
					text{
						font-size: 24rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #AAAAAA;
					}
					image{
						width: 24rpx;
						height: 24rpx;
					}
				}
			}
			.r_list{
				width: 100%;
				height: calc(100% - 81rpx);
				overflow-y: auto;
				.rl_item{
					width: 100%;
					padding: 28rpx 0;
					display: flex;
					align-items: center;
					justify-content: space-between;
					box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EFEFEF;
					.rli_l{
						display: flex;
						flex-direction: column;
						.rlil_text{
							font-size: 30rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							color: #111111;
						}
						.rlil_date{
							font-size: 24rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							color: #88919D;
							margin-top: 24rpx;
						}
					}
					.rli_r{
						display: flex;
						flex-direction: column;
						align-items: flex-end;
						.rlir_text{
							font-size: 36rpx;
							font-family: D-DIN, D-DIN;
							font-weight: bold;
							&.rlir_text_cz{
								color: #FF7D01;
							}
							&.rlir_text_tx{
								color: #111111;
							}
						}
						.rlir_money{
							font-size: 24rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							color: #88919D;
							margin-top: 20rpx;
						}
					}
				}
			}
		}
	}

	::v-deep .nodatadiv{
		height: auto !important;
		padding-top: 50% !important;
	}
</style>